<template>
  <div>
    <!-- 面包屑 -->
    <el-row>
      <my-breadcrumb level1="数据统计" level2="数据报表"></my-breadcrumb>
    </el-row>
    <!-- 报表 -->
    <el-row>
      <div id="echart"></div>
    </el-row>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/MyBreadcrumb'
import echarts from 'echarts'
export default {
  components: {
    MyBreadcrumb
  },
  data() {
    return {
      options: null
    }
  },
  created() {
    this.getEchartsData()
  },
  methods: {
    async getEchartsData() {
      const { data } = await this.$http('/reports/type/1')
      if (data.meta.status === 200) {
        this.options = {
          title: {
            text: 'this is a title'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#E9EEF3'
              }
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          ...data.data
        }
        this.setEchartsData(this.options)
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    setEchartsData(options) {
      const myEchart = echarts.init(document.getElementById('echart'))
      myEchart.setOption(options)
    }
  }
}
</script>

<style lang="less" scoped>
#echart {
  margin: 40px auto 0;
  width: 600px;
  height: 400px;
}
</style>
